<!--
 * @Description:
 * @Version: 1.0
 * @Autor: yel
 * @Date: 2022-03-10 11:43:04
 * @LastEditors: zhou
 * @LastEditTime: 2022-07-01 09:15:03
-->
<template>
    <h3 v-if="isSeriesEmpty">暂无数据</h3>
    <div v-else class="chart"></div>
</template>

<script>
import * as Echarts from "echarts";
import ResizeListener from "element-resize-detector";
// console.dir(ResizeListener);
import { merge, isEmpty } from "lodash";
import { basicOption } from "../defaultOption.js";
import variables from "@/assets/styles/variables.scss";

// console.log("2323", variables.menuText);
export default {
    name: "LineChart",
    props: {
        double_arr: {
            type: Boolean,
            default: false,
        },
        seriesDataList: {
            type: Array,
            default: () => [[]]
        },
        seriesData: {
            type: Array,
            default: () => [],
        },
        extraOption: {
            type: Object,
            default: () => ({}),
        },
        custom: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            chart: null,
        };
    },

    computed: {
        isSeriesEmpty() {
            return isEmpty(this.seriesData) && isEmpty(this.seriesDataList);
        },
    },

    watch: {
        seriesData: {
            deep: true,
            handler() {
                this.updateChartView();
            },
        },
        seriesDataList: {
            deep: true,
            handler() {
                this.updateChartView();
            },
        },
    },

    mounted() {
        this.chart = Echarts.init(this.$el); // 初始化Echart实例
        this.updateChartView(); // 图表数据有更新
        window.addEventListener("resize", this.handleWindowResize); // 窗口大小变化
        this.addChartResizeListener(); // 滚轮缩放
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.handleWindowResize); // 销毁对 window大小变化的 监听事件
    },

    methods: {
        /* 合并配置项和数据，对于需要自定义的配置项以及数据，使用merge函数将其合并为一个option */
        assembleDataToOption() {
            // 这部分的图例formatter取决于UI要求，如果你的项目中不需要，就可以不写formatter
            // 由于echarts版本的迭代，这里的写法也有稍许改变
            let formatter = (name) => {
                const total = this.seriesData.reduce(
                    (pre, item) => pre + item.value,
                    0
                );
                const data =
                    this.seriesData.find((item) => item.name === name) || {};
                const percent = data.value
                    ? `${Math.round((data.value / total) * 100)}%`
                    : "0%";
                return this.custom? name:`${name} ${percent}`;
            };

            // 构造series 数组
            let temp_arr = []
            if(this.double_arr) {
                temp_arr = this.seriesDataList.map(item => {
                    return {data: item}
                })
            }
            else {
                temp_arr = [{data: this.seriesData}]
            }
            return merge(
                {},
                basicOption,
                { color: variables.menuText },
                {
                    legend: { formatter },
                    series: temp_arr,
                },
                this.extraOption
            );
        },

        // 1. 图标数据更新
        updateChartView() {
            if (!this.chart) return;
            const fullOption = this.assembleDataToOption();
            this.chart.setOption(fullOption, true);
        },

        // 2. 对chart元素尺寸进行监听，当发生变化时同步更新echart视图 (滚轮缩放)
        addChartResizeListener() {
            const instance = ResizeListener({
                strategy: "scroll", // 超快滚动模式
                callOnAdd: true,
            });

            instance.listenTo(this.$el, () => {
                if (!this.chart) return;
                this.chart.resize();
            });
        },
        // 3. 当窗口缩放时，echart动态调整自身大小 (窗口缩放)
        handleWindowResize() {
            if (!this.chart) return;
            this.chart.resize();
        },
    },
};
</script>

<style scoped="scoped" lang="scss">
.chart {
    width: 100%;
    height: 100%;
}
</style>
